<template>
	<view>
		<view 
		:class="['topTab',fixed?'fixed':'']" 
		:style="{
			'--tab-index':tabIndex,
			'--tab-length':tabBars.length,
			'--tab-active-color': color,
			'--tab-bg-color': bgColor,
			'--tab-text-color': textColor,
			'--transition': transition,
			fontSize: textSize
		}">
			<view class="tab-bars-wrap">
				<view v-for="(tab,index) in tabBars" :key="index" class="tab-bars-item" :id="'tabbar-'+index" :data-current="index" @click="ontabtap">
					<text class="tab-bars-item-title" :class="tabIndex==index ? 'tab-bars-item-title-active' : ''">{{tab}}</text>
				</view>
			</view>
		</view>
		<view v-if="fixed" class="tab-bars-holder"></view>
	</view>
</template>

<script>
	export default {
		name: 'tabBar',
		props: {
			fixed: {
				type: Boolean,
				default: false
			},
			tabBars: {
				type: Array,
				default: ()=>['标签1','标签2']
			},
			tabIndex: {
				type: Number,
				default: 0
			},
			color: {
				type: String,
				default: '#eb7300'
			},
			bgColor: {
				type: String,
				default: '#ffffff'
			},
			textColor: {
				type: String,
				default: '#555555'
			},
			fontSize: {
				type: [String, Number],
				default: 28
			},
			animate: {
				type: Boolean,
				default: true
			},
			duration: {
				type: [String, Number],
				default: 200
			},
		},
		computed: {
			textSize(){
				return parseInt(this.fontSize) + 'rpx'
			},
			transition(){
				return this.animate ? `margin ${parseInt(this.duration)}ms` : 'none'
			},
		},
		methods: {
            ontabtap(e) {
                let index = e.target.dataset.current || e.currentTarget.dataset.current;
				if(index==this.tabIndex) return
				this.$emit('update:tabIndex', index)
				this.$emit('onChange', index)
            },
		}
	}
</script>


<style lang="scss" scoped>
	$theme-color: var(--tab-active-color);
	$bg-color: var(--tab-bg-color);
	$text-color: var(--tab-text-color);
	.topTab{
		--line-height: 6rpx;
		--line-width: 60rpx;
		box-shadow: 0 3rpx 5rpx rgba($color: #000000, $alpha: .03);
		&::after{
			display: block;
			content: '';
			margin-top: calc(-1 * var(--line-height));
			height: var(--line-height);
			border-radius: var(--line-height) var(--line-height);
			width: var(--line-width);
			background: $theme-color;
			margin-left: calc(var(--tab-index) * 100% / var(--tab-length));
			transform: translateX(calc((100vw / var(--tab-length) - var(--line-width)) / 2));
			transition: var(--transition);
		}
		&.fixed{
			position: fixed;
			top: 0;
			/* #ifdef H5 */
			top: 44px;
			/* #endif */
			width: 100%;
			z-index: 99;
		}
	}
    .tab-bars-wrap {
		display: flex;
        width: 100vw;
		/* #ifdef H5 */
		width:100%;
		/* #endif */
		height: 80rpx;
        flex-direction: row;
        /* #ifndef APP-PLUS */
        white-space: nowrap;
        /* #endif */
		background: $bg-color;
    }
	.tab-bars-item{
        /* #ifndef APP-PLUS */
        display: inline-block;
        /* #endif */
        flex-wrap: nowrap;
		width: calc(100% / var(--tab-length));
		text-align: center;
	}
    .tab-bars-item-title {
        color: $text-color;
        font-size: 30rpx;
        height: 80rpx;
        line-height: 80rpx;
        flex-wrap: nowrap;
        /* #ifndef APP-PLUS */
        white-space: nowrap;
        /* #endif */
    }
    .tab-bars-item-title-active {
        color: $theme-color;
    }
	.tab-bars-holder{
		height: 80rpx;
		width: 100%;
	}
</style>
